<head>
  <title>Clappr Player</title>
  <meta charset="UTF-8">
  <!-- Player -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
  <!-- Quality selector -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/gh/clappr/clappr-level-selector-plugin@latest/dist/level-selector.min.js"></script>
  <style type="text/css">
    .divVideo{
        position:relative;
        width:100%;
        padding-bottom:40%; 
    }
    video{
        position:absolute;
        left:1%;
        top:0;
        width:50%; 
        object-fit: fill;
    }
      </style>
</head>

<body>
  <div id="player"></div>
  <script>
   // Clappr.Log.setLevel(Clappr.Log.LEVEL_DEBUG);
    var player = new Clappr.Player({
      source: "./master.m3u8",
      parentId: "#player",
      mute: false,
      autoPlay: true,
      plugins: {
        core: [LevelSelector]
      },
      levelSelectorConfig: {
        title: '動画品質',
      },
    });
  </script>
</body>
